<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>社区 - 复古游戏博物馆</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            background: radial-gradient(
                    ellipse at center,
                    #1f1f1f 0%,
                    #2c3e50 100%
            );
            color: #333;
        }

        .nav {
            background: #222;
            padding: 10px;
            display: flex;
            justify-content: center;
            gap: 16px;
        }

        .nav a {
            color: white;
            text-decoration: none;
            padding: 8px 12px;
            background: #444;
            border-radius: 4px;
        }

        .container {
            max-width: 800px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
        }

        h2 {
            color: #2c3e50;
        }

        .tab-buttons {
            margin-top: 20px;
        }

        .tab-buttons button {
            margin-right: 10px;
            padding: 8px 16px;
            cursor: pointer;
            background: #ccc;
            border: none;
            border-radius: 4px;
        }

        .tab-content {
            margin-top: 30px;
        }

        .comment-section textarea {
            width: 100%;
            height: 100px;
            margin-top: 10px;
            padding: 10px;
        }

        .comment-section button {
            margin-top: 10px;
            padding: 8px 16px;
            background: #42b983;
            border: none;
            color: white;
            border-radius: 4px;
        }

        .comments-list {
            margin-top: 20px;
        }

        .comment {
            background: #f3f3f3;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 10px;
        }

        .shop {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
        }

        .product-card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 12px;
            width: 160px;
            text-align: center;
        }

        .product-card img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        .cart {
            margin-top: 20px;
            background: #eee;
            padding: 10px;
            border-radius: 6px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .discussion-list {
            margin-bottom: 30px;
        }

        .discussion-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
        }

        .discussion-item:last-child {
            border-bottom: none;
        }

        .username {
            color: #2c3e50;
            font-weight: bold;
        }

        .timestamp {
            color: #aaa;
            font-size: 12px;
            margin-left: 10px;
        }

        .content {
            margin-top: 8px;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: bold;
        }

        input[type="text"], textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        textarea {
            height: 80px;
            resize: vertical;
        }

        .btn-submit {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .btn-submit:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#">首页</a>
    <a href="#">游玩页</a>
    <a href="#">社区</a>
    <a href="#">收藏</a>
</div>

<div class="container">
    <h2>👥 社区</h2>

    <div class="tab-buttons">
        <button onclick="showTab('discussion')">讨论区</button>
        <button onclick="showTab('shop')">商城</button>
    </div>

    <div id="discussion" class="tab-content">
        <div class="header">
            <h1>社区讨论区</h1>
        </div>

        <%-- 处理发言提交 --%>
        <%
            request.setCharacterEncoding("UTF-8");
            List<Map<String, String>> discussions = (List<Map<String, String>>) session.getAttribute("discussions");
            if (discussions == null) {
                discussions = new ArrayList<>();
                session.setAttribute("discussions", discussions);
            }
            String method = request.getMethod();
            if ("POST".equalsIgnoreCase(method)) {
                String username = request.getParameter("username");
                String content = request.getParameter("content");
                if (username != null && !username.trim().isEmpty() && content != null && !content.trim().isEmpty()) {
                    Map<String, String> item = new HashMap<>();
                    item.put("username", username.trim());
                    item.put("content", content.trim());
                    item.put("timestamp", new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
                    discussions.add(0, item); // 新发言置顶
                }
            }
        %>

        <div class="discussion-list">
            <% if (discussions.isEmpty()) { %>
            <p style="color:#888;text-align:center;">暂无发言，快来抢沙发吧！</p>
            <% } else { %>
            <% for (Map<String, String> item : discussions) { %>
            <div class="discussion-item">
                <span class="username"><%= item.get("username") %></span>
                <span class="timestamp"><%= item.get("timestamp") %></span>
                <div class="content"><%= item.get("content") %>
                </div>
            </div>
            <% } %>
            <% } %>
        </div>

        <form method="post" autocomplete="off">
            <div class="form-group">
                <label for="username">昵称：</label>
                <input type="text" id="username" name="username" maxlength="20" required/>
            </div>
            <div class="form-group">
                <label for="content">发言内容：</label>
                <textarea id="content" name="content" maxlength="500" required></textarea>
            </div>
            <button type="submit" class="btn-submit">发表</button>
        </form>
    </div>

    <div id="shop" class="tab-content" style="display: none">
        <div class="shop">
            <div class="product-card">
                <img src="images/product1.png" alt="商品1"/>
                <h4>像素T恤</h4>
                <p>￥99</p>
                <button>加入购物车</button>
            </div>
            <div class="product-card">
                <img src="images/product2.png" alt="商品2"/>
                <h4>游戏挂件</h4>
                <p>￥49</p>
                <button>加入购物车</button>
            </div>
        </div>

        <div class="cart">
            <h3>🛒 我的购物车</h3>
            <p>购物车为空</p>
        </div>
    </div>
</div>

<script>
    function showTab(tab) {
        document.getElementById("discussion").style.display =
            tab === "discussion" ? "block" : "none";
        document.getElementById("shop").style.display =
            tab === "shop" ? "block" : "none";
    }
</script>
</body>
</html>
